<template>
  <el-dialog :title="title" class="addPersonnel" :visible.sync="isDial" width="800px" :before-close='closeDialog'>
    <el-form :model="form" size="mini" :rules='rules' ref="addPersonnel" >
      <div class="column">
        <el-form-item label="所属部门" prop='departmentId' :label-width="formLabelWidth">
          <!-- <el-select v-model="form.departmentId" class="leftBorder" placeholder="请选择部门" size="mini">
            <el-option :label="item.label" v-for="item in department" :value="item.id"></el-option>
          </el-select> -->
          <el-cascader expand-trigger="hover" :options="$store.state.department" v-model="form.departmentId"> </el-cascader>
        </el-form-item>
        <el-form-item label="员工姓名" prop='realName' :label-width="formLabelWidth">
          <el-input v-model="form.realName" :maxlength="10" class="leftBorder" autocomplete="off" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop='sex' :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="请选择活动性别" size="mini">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop='idCardNo' :label-width="formLabelWidth">
          <el-input v-model="form.idCardNo" :maxlength="18" class="leftBorder" autocomplete="off" size="mini" @blur="getdate"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop='joinTime' :label-width="formLabelWidth">
          <el-date-picker v-model="form.joinTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="员工类型" prop='isFullTime' :label-width="formLabelWidth">
          <el-select v-model="form.isFullTime" placeholder="请选择活动员工类型" size="mini">
            <el-option label="全职" value="1"></el-option>
            <el-option label="兼职" value="0"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="column">
        <el-form-item label="职位" prop='roleId' :label-width="formLabelWidth">
          <el-select v-model="form.roleId" class="leftBorder" placeholder="请选择职位" size="mini">
            <el-option :label="item.name" :value="item.id" v-for="item in $store.state.role"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工编号" prop='id' :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" size="mini" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop='phone' :label-width="formLabelWidth">
          <el-input v-model="form.phone" :maxlength="11" class="leftBorder" autocomplete="off" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="出生年月" prop='birthday' :label-width="formLabelWidth">
            <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="离职时间" prop='quitTime' :label-width="formLabelWidth">
          <el-date-picker v-model="form.quitTime" :disabled="true" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否参与接单" prop='type' label-width="107px">
           <el-switch v-model="form.type" active-color="#13ce66" @change="selSwitch"></el-switch>
           <!-- <el-select v-if="form.type" v-model="form.serviceArea" style="width:60%;margin-left:8px;" placeholder="请选择服务区域" size="mini">
              <el-option v-for="item in $store.state.urbanArea" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
          <el-cascader size="mini" expand-trigger="hover" style="width:60%;margin-left:8px;" :options="$store.state.urbanArea" v-model="form.serviceArea" placeholder="请选择服务区域" >
          </el-cascader>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="savePersonnel">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
import {setTime,getDate} from '../../assets/session.js'
// let info={
//   realName: "张三",
//   departmentId: 1, //部门
//   sex: "1",
//   idCardNo: "330881199702113968",  //身份证号
//   joinTime: "", //入职时间
//   isFullTime: "1",
//   roleId: 1, //职位
//   id: "自动生成",
//   phone: "15268095285",
//   birthday: "", //生日
//   quitTime: "", //离职时间
//   serviceArea: 0, // 服务区域
//   type:true,//  是否参与接单
// }
let info={
  realName: "",
  departmentId: [], //部门
  sex: "1",
  idCardNo: "",  //身份证号
  joinTime: "", //入职时间
  isFullTime: "1",
  roleId: '', //职位
  id: "自动生成",
  phone: "",
  birthday: "", //生日
  quitTime: "", //离职时间
  serviceArea: [], // 服务区域
  type:true,
}
export default {
  data() {
    return {
      isDial: false,
      form: info,
      rules: {
        realName: [
          {
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            required: true,
            message: "姓名是必填项",
            trigger: "blur"
          }
        ],
        roleId: [
          {
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            required: true,
            message: "职位是必选项",
            trigger: "blur"
          }
        ],
        departmentId: [
          {
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            required: true,
            message: "所属部门是必选项",
            trigger: "blur"
          }
        ],
        idCardNo: [
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            required: true,
            message: "请输入正确的身份证号",
            trigger: "blur"
          }
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/g,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ]
      },
      formLabelWidth: "80px",
      title:"添加员工",
      id:'',
      urbanArea:this.$store.state.urbanArea,
      department:[],//部门
    };
  },
  created() {
    let that=this
    this.$root.$on("addPersonnel", (type,data) => {
      this.department=this.$store.state.department[0].children
      this.isDial = true;
      if(type=="edit"){
          this.title="编辑员工信息"
          let url = "admin/"+ data.id;
          request.ajaxGet({
            url,
            that,
            fn(res){
              
              let arr=[]
              let urbanArea=that.$store.state.urbanArea
              
              let serviceArea=[]
              for(let i in urbanArea){
                for(let j in urbanArea[i].children){
                  if(urbanArea[i].children[j].id==res.serviceArea){
                    serviceArea.push(urbanArea[i].id)
                    serviceArea.push(urbanArea[i].children[j].id)
                  }
                }
              }
              res.departmentId=that.depList(res.departmentId)
              res.sex=res.sex==null?'':"" + res.sex
              res.roleId=res.roleId==null?'':parseInt(res.roleId)
              
              res.serviceArea= serviceArea
              res.isFullTime=res.isFullTime==null?'':"" + res.isFullTime
              res.type=res.type==1? true : false
              that.id=res.id
              that.form=res
            }
          })
      }else{
        this.title="添加员工"
      }
    });
  },
  methods:{
    savePersonnel(){
      let that=this
      this.$refs.addPersonnel.validate(valid => {
        let url = "admin";
        let form = that.form;
        let met='POST'
        let params={
          departmentId:form.departmentId.pop(),
          roleId:parseInt(form.roleId),
          isFullTime:parseInt(form.isFullTime),
          sex:parseInt(form.sex),
          phone:form.phone,
          realName:form.realName,
          idCardNo:form.idCardNo,
          type:form.type==true? 1 : 0,
          serviceArea:form.serviceArea[1]
        }
        form.joinTime ? params.joinTime=setTime(form.joinTime) : ''
        form.birthday ? params.birthday=setTime(form.birthday) : ''
        form.sex ? params.sex=form.sex : ''
        form.isFullTime ? params.isFullTime=form.isFullTime : ''
        if(that.title=="编辑员工信息"){
          met='PUT'
          params.id=that.id
        }
        request.ajaxPost({
          url,
          that,
          type:met,
          params,
          fn(res) {
            that.isDial = false;
            if(that.title=="编辑员工信息"){
              that.$root.$emit('search','no')
            }else{
              that.$root.$emit('search','add')
            }
            that.resetForm()
          }
        });
      })
    },
    selDepartment(data){ //部门的选中事件
      let aa=data.pop()
      let form=this.form
      form.departmentId=aa
    },
    getdate(){
      let form=this.form
      if(form.idCardNo.length==18){
        form.birthday=getDate(form.idCardNo)
      }
    },
    selSwitch(val){  //是否参与接单开关
      let form=this.form
      if(!val){
        form.serviceArea=0
      }
    },
    depList(departmentId){
      let data=this.$store.state.department
      var result = [];    // 存放结果
      var queue = [data]; // 用于遍历
      var item;           // 临时值
      if(!departmentId){
        return []
      }
      // 从队列里取出要转换的数据数组
      while (item = queue.shift()) {
          item.forEach(i => {
              // 遍历数组，转换数据，放入结果中
              result.push({
                  id: i.id,
                  label: i.label,
                  parentId: i.parentId,
                  level: i.level,
              });
              // 如果有子数据的，放到队列最后等待处理
              i.children && queue.push(i.children);
          })
      }
      result=result.sort((a,b)=>b.level-a.level)
      let arr=[]
      let arrId=[]
      for(let i in result){
        if(result[i].id==departmentId){
          arr.push(result[i])
          arrId.push(result[i].id)
        }
        if(arr[0]){
          for(let j in arr){
            if(arr[j].parentId==result[i].id){
              arr.push(result[i])
              arrId.push(result[i].id)
            }
          }
        }
      }
      arrId.reverse()
      return arrId
    },
    resetForm() { //清空记录
      this.$refs['addPersonnel'].resetFields();
    },
    closeDialog(){
      this.isDial=false
      this.resetForm("ruleForm");
    },
  }
};
</script>
<style lang="less" scoped>
.addPersonnel {
  text-align: left;
  .column {
    width: 50%;
    float: left;
    .el-select {
      width: 80%;
    }
    .el-input {
      width: 80%;
    }
    .el-cascader{
      width: 80%;
    }
  }
}
</style>
